<template>
    <view class="scroll-container">
        <view class="scroll-text" :style="{ transform: 'translateY(' + translateY + 'px)' }">
            <view v-for="(item, index) in textList" :key="index" :style="[textStyle]" @click="e => $emit('click', item, index)">{{ textKey ? item[textKey] : item }}</view>
        </view>
    </view>
</template>

<script>
	export default {
		props: {
			// 要滚动的内容。支持纯文本或者对象
			textList: {
				type: Array,
				required: true
			},
			// 如果textList的元素是对象，必须指定显示的内容字段
			textKey: String,
			// 滚动间隔时间，单位毫秒
			scrollInterval: {
				type: Number,
				default: 2000
			},
			// 文字样式
			textStyle: Object
		},
		data() {
			return {
				translateY: 0,
				currentIndex: 0,
				intervalId: null
			};
		},
		mounted() {
			this.startScroll();
		},
		methods: {
			startScroll() {
				this.intervalId = setInterval(() => {
					this.currentIndex = (this.currentIndex + 1) % this.textList.length;
					this.translateY = -this.currentIndex * 30; // 30 为每行文字高度
				}, this.scrollInterval); // 每 2 秒滚动一次
			},
			stopScroll() {
				clearInterval(this.intervalId);
			}
		},
		onUnload() {
			this.stopScroll();
		}
	};
</script>

<style>
	.scroll-container {
		overflow: hidden;
	}

	.scroll-text {
		transition: transform 0.5s ease;
	}
</style>  